<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brython Snake</title>
    <script type="text/javascript" src="./brython.min.js"></script>
    <script type="text/javascript" src="./brython_stdlib.js"></script>
    <style>
        body {
            background-color: #444;
            color: aliceblue;
        }
        canvas {
            margin-top: 1%;
            padding-left: 0;
            padding-right: 0;
            margin-left: auto;
            margin-right: auto;
            display: block;
            border: 1px solid #535353;
        }
        .score{
            color: red;
            font-size: 20px;

            text-align: center;
        }
        .section {
            text-align: center;
        }
        .text-center {
            text-align: center;
        }
    </style>

</head>

<body onload="brython()" style="margin: 0 auto">
<div class="section">brython <a href="https://github.com/brython-dev/brython">Python!</a></div>
<div>
    <div id="score" class="score">得分: 0</div>
    <div id="high-score" class="score">最高分: 0</div>
    <div id="delayTime" class="score">速度: 0</div>
</div>

<canvas id="game-board" width="620" height="620"></canvas>
<div class="text-center">
    <button id="instructions-btn" class="btn btn-info">操作提示</button>
</div>



<script type="text/python">

    from browser import document, html, window
    import random

    score = 0
    high_score = 0

    px = py = 10
    gs = tc = 25
    ax = ay = 15
    xv = yv = 0
    trail = []
    tail = 5

    pre_pause = [0,0]
    paused = False

    delayTime = 300

    def game():
        global px, py, tc, gs, ax, ay, trail, tail, score, delayTime
        px += xv
        py += yv
        if px < 0:
            px = tc-1
        if px > tc-1:
            px = 0
        if py < 0:
            py = tc-1
        if py > tc-1:
            py = 0
        ctx.fillStyle = "wheat"
        ctx.fillRect(0, 0, canvas.width, canvas.height)
        ctx.fillStyle = "lime"
        for i in range(len(trail)):
            ctx.fillRect(trail[i][0]*gs, trail[i][1]*gs, gs-2, gs-2)
            if trail[i][0] == px and trail[i][1] == py:
                delayTime = 300
                score = score if paused else 0
                tail = tail if paused else 5
                document["delayTime"].innerHTML = "速度: " + str(delayTime)
                document["score"].innerHTML = "得分: " + str(score)
        trail.insert(0, [px, py])
        while len(trail) > tail:
            trail.pop()

        if ax == px and ay == py:
            tail += 1
            ax = int(random.random()*tc)
            ay = int(random.random()*tc)
            score += 1
            update_score(score)
        ctx.fillStyle = "red"
        ctx.fillRect(ax*gs, ay*gs, gs-2, gs-2)

    def update_score(new_score):
        global high_score
        global delayTime
        global game_loop
        document["score"].innerHTML = "得分: " + str(new_score)
        if new_score > high_score:
            document["high-score"].innerHTML = "最高分: " + str(new_score)
            high_score = new_score
        if new_score <= 20:
            delayTime = 250
        elif new_score <= 50:
            delayTime = 200
        elif new_score <= 100:
            delayTime = 150
        elif new_score <= 200:
            delayTime = 100
        elif new_score > 200:
            delayTime = 50
        document["delayTime"].innerHTML = "速度: " + str(delayTime)
        window.clearInterval(game_loop)
        game_loop = window.setInterval(game, delayTime)

    def key_push(evt):
        global xv, yv, pre_pause, paused
        key = evt.keyCode
        if key == 37 and not paused:
            xv = -1
            yv = 0
        elif key == 38 and not paused:
            xv = 0
            yv = -1
        elif key == 39 and not paused:
            xv = 1
            yv = 0
        elif key == 40 and not paused:
            xv = 0
            yv = 1
        elif key == 32:
            temp = [xv, yv]
            xv = pre_pause[0]
            yv = pre_pause[1]
            pre_pause = [*temp]
            paused = not paused

    def show_instructions(evt):
        window.alert("使用箭头键移动，按空格键暂停游戏。")


    canvas = document["game-board"]
    ctx = canvas.getContext("2d")
    document.addEventListener("keydown", key_push)
    game_loop = window.setInterval(game, delayTime)
    instructions_btn = document["instructions-btn"]
    instructions_btn.addEventListener("click", show_instructions)


</script>

</body>

</html>